import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useUIStore } from '@/store/ui';

const BottomNavigation: React.FC = () => {
  const router = useRouter();
  const { currentView, setCurrentView } = useUIStore();

  const handleChatClick = (e: React.MouseEvent) => {
    e.preventDefault();
    if (router.pathname === '/') {
      // If on homepage, just toggle view
      setCurrentView(currentView === 'chat' ? 'services' : 'chat');
    } else {
      // If on any other page, redirect to homepage with services view
      router.push('/').then(() => {
        setCurrentView('services');
      });
    }
  };

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50">
      <div className="max-w-2xl mx-auto bg-white/95 backdrop-blur-sm border-t border-gray-100">
        <div className="flex items-center h-12">
          <a
            href="#"
            onClick={handleChatClick}
            className={`flex-1 h-full flex items-center justify-center relative ${
              router.pathname === '/' && currentView === 'chat'
                ? 'text-blue-600'
                : 'text-gray-600 hover:text-gray-800'
            }`}
          >
            <span className="text-sm font-medium">对话</span>
            {router.pathname === '/' && currentView === 'chat' && (
              <div className="absolute bottom-0 left-1/2 w-12 h-0.5 bg-blue-600 transform -translate-x-1/2" />
            )}
          </a>

          <div className="w-px h-6 bg-gray-100" />

          <Link
            href="/profile"
            className={`flex-1 h-full flex items-center justify-center relative ${
              router.pathname === '/profile'
                ? 'text-blue-600'
                : 'text-gray-600 hover:text-gray-800'
            }`}
          >
            <span className="text-sm font-medium">我的</span>
            {router.pathname === '/profile' && (
              <div className="absolute bottom-0 left-1/2 w-12 h-0.5 bg-blue-600 transform -translate-x-1/2" />
            )}
          </Link>
        </div>
      </div>
    </div>
  );
};

export default BottomNavigation;